<template>
  {{xiaoming}}<br>
  <!--
  {{xiaoming.getName()}}<br>-->
 {{ a }}
  <br><br>
  <button @click="xiaoming.perosn.name='template'">template 改属性</button><br>
  <button @click="xiaoming.setName('ddd')">template action</button><br>
  <button @click="xiaoming.$reset()">template reset</button><br>
  <hr>

  <button @click="start">直接改属性</button><br><br>
  <button @click="onAction">通过 action</button><br>
  <button @click="onState">通过 state</button><br>
  <button @click="onPatch">通过 patch</button><br>
  <button @click="reset">重置</button>

  <hr>

</template>

<script lang="ts">
  import { toRefs, ref, reactive, readonly } from 'vue'
  import { useSetup } from './object'

  import myLog from './log'

</script>

<script lang="ts" setup>

  const a = reactive({
    a: ref('ddd')
  })

  const xiaoming = useSetup()
  console.log('useSetup', xiaoming)

  myLog(xiaoming)

  const start = () => {
    xiaoming.perosn = 'aa'
    // xiaoming.perosn.name = 'bb'
    a.a = 'wwwww'
  }
  

  const reset = () => {
    xiaoming.$reset()
  }
  
  const onAction = () => {
    xiaoming.setName('action 修改')
    
  }
  
  const onState = () => {
    xiaoming.$state = {
      perosn: 'state 设置'
    }
  }
  
  const onPatch = () => {
    xiaoming.$patch ( {
      perosn: 'patch 设置'
    })
  }

</script>